<template>

<div class="app-container">
    <el-card class="box">
  <div class="container">
    <!-- 左边七分 -->
    <div class="left-section">
      <!-- 留言头部 -->
      <div class="comment-head">
        <CommentHead @add-comment="handleAddComment" :userInfo="userInfo" />
      </div>
      <div class="comment-list">
        <CommentItem ref="commentList" :userInfo="userInfo" :isAll="isAll" :type="type"/>
      </div>
    </div>

    <!-- 右边三分 -->
    <div class="right-section">
      <div class="ranking-list">
        <RankingList :rankingData="rankingData" />
      </div>
    </div>
  </div>
</el-card>
</div>
</template>



<script>
import CommentHead from '@/components/comment/CommentHead.vue';
import CommentItem from '@/components/comment/CommentItem.vue';
import RankingList from '@/components/comment/RankingList.vue';
import { getRankingList, addComment } from "@/api/comment/index.js"; // 导入两个接口
import { useUserStore } from "@/store";
export default {
  components: {
    CommentHead,
    CommentItem,
    RankingList,
  },
  data() {
    return {
      commentData: [],
      rankingData: [], // 排行榜数据
      userInfo: null,
      isAll: 0,
      type: 0,
    };
  },
  created() {
    this.userInfo = useUserStore();
    this.fetchRankingData();
  },
  methods: {
    async handleAddComment(comment) {
    const commentsDTO = {
        fromId: this.userInfo.uid, // 需要替换为实际的用户学号
        content: comment,
        fromName: this.userInfo.username, // 可能需要根据实际情况调整
        type: 0 // 需要确定分区标识的实际值
    };
    console.log(commentsDTO)
    try {
        let data = await addComment(commentsDTO);
        if (!data.code) {
          // 调用子组件的方法来刷新评论列表
          this.$nextTick(() => {
          this.$refs.commentList.fetchComments();
        });
          this.$message.success('发表留言成功');
        } else {
          this.$message.error('发表失败，请重试');
        }

    } catch (error) {
        console.error('添加评论失败:', error);
        // 错误处理
    }
},
    async fetchRankingData() {
      try {
        const response = await getRankingList();
        this.rankingData = response.data;
    
      } catch (error) {
        console.error('获取排行榜数据成功:', error);
      }
    },
  },
};
</script>

<style scoped>


/* 禁止整个页面的滚动条 */
html, body {
  overflow: hidden; 
  margin: 0; /* 清除默认的页边距 */
  height: 100%; /* 确保页面高度充满整个视口 */
}

.container {
  display: flex;
  /* overflow-y: auto; 仅容器部分启用滚动条 */
  height: 80vh; /* 容器高度占页面80% */
}

.left-section {
  flex: 8;
  display: flex;
  flex-direction: column; /* 保证子组件竖直排列 */
}

.comment-head {
  flex-shrink: 0; /* 固定头部高度 */
  margin-bottom: 10px;
}

.comment-list {
  flex: 1;
  overflow-y: auto; /* 留言部分有滚动条 */
  padding-right: 10px; /* 解决滚动条占用空间时内容偏移的问题 */
}

.right-section {
  flex: 2;
  padding: 10px;
  overflow: hidden; /* 右侧不需要滚动条 */
}

.ranking-list {
  display: flex;
  flex-direction: column;
}

.ranking-list > div {
  padding: 10px 0; /* 每条排行榜项的间距 */
  border-bottom: 1px solid #ddd; /* 可选：每条排行榜项之间的分隔线 */
}
</style>
